<template>
  <el-dialog
    title="汇报任务"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    destroy-on-close
    width="30%"
  >
    <section class="StudentDetailSettleOrderAdd__container">
      <h1>
        <span>「{{ row.name }}」</span>{{ row.project_name }}
      </h1>
      <div class="total">
        <div>
          <div class="money">
            <el-progress
              type="circle"
              :percentage="form.progress ? +form.progress : 0"
              :stroke-width="2"
            ></el-progress>
          </div>
        </div>
      </div>
    </section>

    <div class="form">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-position="top"
        label-width="0"
        size="small"
      >
        <quick-field-panel title="任务进度" required>
          <el-form-item prop="progress">
            <el-input-number
              v-model.number="form.progress"
              placeholder="请输入任务进度"
              :min="+row.progress"
              :max="99"
              label="任务进度"
            ></el-input-number>
          </el-form-item>
        </quick-field-panel>
        <quick-field-panel title="详细说明" required>
          <el-form-item prop="remark">
            <el-input
              type="textarea"
              v-model="form.remark"
              placeholder="请输入详细说明"
              :rows="4"
              clearable
              maxlength="200"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </quick-field-panel>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button
        size="medium"
        type="primary"
        @click="doReport()"
        :loading="loading"
      >
        确认
      </el-button>
      <el-button size="medium" @click="isShow = false">取消</el-button>
    </span>
  </el-dialog>
</template>
      
<script>
import _api from "@/common/api/project_job_report";
import moment from "moment";

export default {
  components: {},
  data() {
    return {
      isShow: false,
      loading: false,
      newDate: "",
      form: {},
      rules: {
        progress: [{ required: true, message: "必填", trigger: "blur" }],
        remark: [
          { required: true, message: "必填", trigger: "blur" },
          {
            min: 5,
            message: "详细说明5字以上",
            trigger: "blur",
          },
        ],
      },
      row: {},
    };
  },
  methods: {
    showDialog(row) {
      this.row = Object.assign({}, row);
      this.form = Object.assign(
        {},
        {
          id: +row.id,
          progress: +row.progress,
        }
      );
      this.isShow = true;
    },

    doReport() {
      this.loading = true;
      let data = {};
      try {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            if (this.row.progress < this.form.progress) {
              if (this.row.plan_end_date < this.newDate) {
                const date = moment(this.row.plan_end_date).add(
                  this.row.work_load - this.row.real_work_load,
                  "d"
                );
                data = {
                  id: this.form.id,
                  remark:
                    this.form.remark + "+" + moment(date).format("YYYY-MM-DD"),
                  progress: this.form.progress,
                };
                // this.form.remark =
                //   this.form.remark + "+" + moment(date).format("YYYY-MM-DD");
              } else {
                // this.form.remark =
                //   this.form.remark + "+" + this.row.plan_end_date;
                data = {
                  id: this.form.id,
                  remark: this.form.remark + "+" + this.row.plan_end_date,
                  progress: this.form.progress,
                };
              }
            } else {
              return this.$message.error("汇报进度必须大于当前进度");
            }

            await _api.reportAsync(data);
            this.$emit("reported", {});
            this.isShow = false;
          }
        });
      } finally {
        this.loading = false;
      }
    },
    getNewDate() {
      const date = new Date();
      this.newDate = moment(date).format("yyyy-MM-DD");
    },
  },
  created() {
    this.getNewDate();
  },
};
</script>
      
      <style lang="scss" scoped>
.StudentDetailSettleOrderAdd__container {
  h1 {
    span {
      font-size: 2.4rem;
      font-weight: bold;
      color: #333;
    }
  }

  .total {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    .money {
      display: flex;
      align-items: flex-end;
      font-size: 5rem;
      color: coral;
      margin: 50px;

      // &::before {
      //   content: "¥";
      //   font-size: 3rem;
      //   margin-right: 5px;
      //   margin-bottom: 4px;
      // }

      // &::after {
      //   content: ".00";
      //   font-size: 2.4rem;
      //   margin-bottom: 4px;
      // }
    }
  }
}
</style>